<template>
  <div class="account">
    <div class="form-wrap">
      <n-form ref="formRef" :rules="rules" :model="model">
        <n-form-item path="username" label="用户名">
          <n-input
            v-model:value="model.username"
            @keydown.enter.prevent
          />
          </n-form-item>
          <n-form-item path="password" label="密码">
              <n-input
                v-model:value="model.password"
                type="password"
                @keydown.enter.prevent
              />
          </n-form-item>
          <n-form-item
            first
            path="reenteredPassword"
            label="重复密码"
            ref="rPasswordFormItemRef"
          >
            <n-input
              :disabled="!model.password"
              v-model:value="model.reenteredPassword"
              type="password"
              @keydown.enter.prevent
            />
          </n-form-item>
          <n-form-item path="validata" label="验证码">
            <n-grid x-gap="12" :cols="2">
              <n-gi>
                <n-input
                  v-model:value="model.validata"
                  @keydown.enter.prevent
                />
              </n-gi>
              <n-gi>
                <n-button type="info" @click="showQrCodeClick" block>获取验证码</n-button>
              </n-gi>
            </n-grid>
          </n-form-item>
          <n-row :gutter="[0, 24]">
            <n-col :span="24">
              <div style="display: flex; justify-content: flex-end;">
                <n-button type="primary" @click="handleValidateButtonClick" block>
                  注册
                </n-button>
              </div>
            </n-col>
          </n-row>
        </n-form>
      <div class="text-center">
        <a href="" class="text-cyan">忘记密码</a> |
        <router-link to="/">登录</router-link>
      </div>
      <RegisterCode :show="showQrCode" @hideQrCode="hideQrCode" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRef } from 'vue'
import { useMessage } from 'naive-ui'
import { Verification } from '../../utils/verification'
import RegisterCode from 'components/Qrcode/RegisterCode.vue'
export default defineComponent({
  components: {
    RegisterCode
  },
  setup () {
    const formRef = ref()
    const showQrCode = ref<boolean>(false)
    const rPasswordFormItemRef = ref()
    const modelRef = reactive({
      username: '13888888888',
      password: 'a123456',
      reenteredPassword: 'a123456',
      validata: '123456'
    })
    const message = useMessage()

    // 提交表单
    const submit = () => {
      alert('提交表单')
    }
    function validatePasswordStartWith(rule: unknown, value: string) {
      return (
        toRef(modelRef, 'password').value &&
        toRef(modelRef, 'password').value.startsWith(value) &&
        toRef(modelRef, 'password').value.length >= value.length
      )
    }
    function validatePasswordSame (rule: unknown, value: string): boolean {
      return value === toRef(modelRef, 'password').value
    }
    
    return {
      showQrCode,
      message,
      formRef,
      rPasswordFormItemRef,
      model: modelRef,
      submit,
      rules: {
        username: [
          {
            required: true,
            validator (rule: unknown, value: string) {
              return Verification.validator_username(rule, value)
            },
            trigger: ['input', 'blur']
          }
        ],
        password: [
          {
            required: true,
            validator (rule: unknown, value: string) {
              return Verification.validator_password(rule, value)
            },
            trigger: ['blur', 'password-input']
          }
        ],
        reenteredPassword: [
          {
            required: true,
            message: '再次输入密码',
            trigger: 'input'
          },
          {
            validator: validatePasswordStartWith,
            message: '两次密码长度不一致',
            trigger: 'input'
          },
          {
            validator: validatePasswordSame,
            message: '两次密码输入不一致',
            trigger: ['blur', 'password-input']
          }
        ],
        validata: [
          {
            required: true,
            validator (rule: unknown, value: string) {
              return Verification.validator_validata(rule, value)
            },
            trigger: ['input', 'blur']
          }
        ]
      },
      // handlePasswordInput() {
      //   const reenteredPassword = toRef(modelRef, 'reenteredPassword')
      //   if (reenteredPassword) {
      //     // reenteredPassword.validate({ trigger: 'password-input' })
      //     reenteredPassword.value.validate({ trigger: 'password-input' })
      //   }
      // },
      handleValidateButtonClick() {
        formRef.value.validate((errors: any) => {
          if (!errors) {
            message.success('验证通过')
            const { username, password, reenteredPassword, validata } = modelRef
            console.log(username)
          } else {
            message.error('验证失败')
          }
        })
      },
      showQrCodeClick(): void {
        showQrCode.value = true
      },
      hideQrCode(): void {
        console.log('emite')
        showQrCode.value = false
      }
    }
  }
})
</script>
<style lang="scss">
@import './style.scss';
</style>